<template>
    <div class="content">
        <div class="row">
            <div class="col-md-3">
            </div>

            <div class="col-md-1 col-md-offset-3" style="padding:0;font-weight:700">
                当前环节：
            </div>
            <div class="col-md-5">
                处理
            </div>
        </div>
        <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                处理人：
            </div>
            <div class="col-md-5">
                {{disposeData.disposePerson}}
            </div>
            <div class="col-md-1" style="padding:0;font-weight:700">
                时间：
            </div>
            <div class="col-md-5">
                {{getDate()}}
            </div>
        </div>
        <!-- <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                上传附件：
            </div>
            <div class="col-md-2">
                <input type="file" name="" id="" style="display:block" />
            </div>
        </div> -->
        <div class="row">
            <div class="col-md-1" style="padding:0;font-weight:700">
                描述：
            </div>
            <div class="col-md-9">
                <textarea class="form-control" rows="3" placeholder="Enter ..." v-model="disposeData.disposeDesc" maxlength="80"></textarea>
            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <label class="col-sm-1 control-label" style="padding:0;font-weight:700;text-align:right">上传照片：</label>
                <div class="col-sm-11" :class="{hiddenIcon: fileList.length>2}">
                    <el-upload :action="uploadUrl" :file-list="fileList" list-type="picture-card" :on-success='handleSuccess' :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top:100px">
            <div class="col-md-1 col-md-offset-4">
                <button type="button" class="btn btn-block btn-primary" @click="getEventDispose">提交</button>
            </div>

        </div>
    </div>
</template>

<script>
import orderDept from "@/components/common/orderDept.vue";
import utils from "@/utils";

export default {
    props: ["formList"],
    data() {
        return {
            disposeData: {
                orderId: "",
                disposeDept: "",
                disposePerson: "选择责任人",
                disposeDesc: "",
                disposePhotopath: "",
                disposeFilepath: "",
                personId: "",
                peopleId: "",
            },
            uploadUrl: `${window.apiPrefix}/admin/uploadFile`,
            dialogImageUrl: "",
            dialogVisible: false,
            fileList: [],
            valid: {
                disposeDept: false,
                disposePerson: false
            }
        };
    },
    components: {
        orderDept,

    },
    watch: {
        fileList() {
            this.disposeData.disposePhotopath = "";
            this.fileList.forEach(item => {
                this.disposeData.disposePhotopath += `${item.response.data},`;
            });
            this.disposeData.disposePhotopath = this.disposeData.disposePhotopath.substr(
                0,
                this.disposeData.disposePhotopath.length - 1
            );
        }
    },
    mounted() {
        this.getEventWorkinfo();
    },
    methods: {

        handleRemove(file, fileList) {
            this.fileList = fileList;
            // console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response, file, fileList) {
            this.fileList = fileList;
        },
        getEventDispose() {
            this.disposeData.orderId = this.formList.orderId;
            // console.log(this.disposeData)
            this.$api.ticket.list.eventDispose(this.disposeData).then(res => {
                if (res.success) {
                    // console.log(this.disposeData);
                    console.log(res);
                    this.formList.orderStatus = res.data;
                    this.$$message({
                        message: "恭喜您，处理成功！",
                        type: "success"
                    });
                    this.$parent.$refs.detailmsgComp.getEventWorkinfo();
                    this.$parent.$refs.detailmsgComp.$parent.getSelEventId();
                    this.$emit("isActive");
                }
                else {
                    this.$$message({
                        message: res.msg,
                        type: "error"
                    });
                }
            });


        },
        getEventWorkinfo() {
            this.$api.ticket.list
                .eventWorkinfo({
                    orderId: this.formList.orderId
                })
                .then(res => {
                    if (res.success) {
                        this.paifaData = res.data.distributeList;
                        this.disposeData.disposeDept =
                            res.data.distributeList[0].distributeDept;
                        this.disposeData.disposePerson =
                            res.data.workList[0].sysPersonName;
                        this.disposeData.personId =
                            res.data.workList[0].personId;
                        this.disposeData.peopleId =
                            res.data.distributeList[0].peopleId;
                    }
                });
        },
        getDate() {
            return utils.getDate();
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content {
  .row {
    margin: 17px 0;
  }
  .col-md-1 {
    text-align: right;
    height: 32px;
    line-height: 32px;
  }
  .col-md-5 {
    height: 32px;
    line-height: 32px;
    color: #b2afb3;
  }
  select {
    width: 200px;
    height: 32px;
    line-height: 32px;
    padding-top: 4px;
    color: #b2afb3;
    border-radius: 5px;
  }
  img {
    width: 90px;
    height: 90px;
    margin-right: 45px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.hiddenIcon {
  .el-upload--picture-card {
    display: none;
  }
}
input[name="file"] {
  display: none;
}
</style>